<template>
  <div v-show="searchFlag" class="searchInfo">
    <van-form v-model="searchParams" class="vantForm">
      <van-cell-group inset>
        <div class="selTest">
          <label class="labelLeft">物料名称</label>
          <el-input v-model="searchParams.name" clearable placeholder="请输入" />
        </div>
        <div class="selTest">
          <label class="labelLeft">物料编码</label>
          <el-input v-model="searchParams.productCode" clearable placeholder="请输入" />
        </div>
        <div class="selTest">
          <label class="labelLeft">批次号</label>
          <el-input v-model="searchParams.barCode" clearable placeholder="请输入" />
        </div>
        <!-- <div class="selTest">
          <label class="labelLeft">库位名称</label>
          <el-input v-model="searchParams.stockLocationName" clearable placeholder="请输入" />
        </div>
        <div class="selTest">
          <label class="labelLeft">库位编码</label>
          <el-input v-model="searchParams.stockLocationNum" clearable placeholder="请输入" />
        </div> -->
      </van-cell-group>
      <div class="btnOk">
        <van-button round block reset @click="cancel"> 重置 </van-button>
        <van-button round block type="primary" @click="onSubmit">
          确定
        </van-button>
      </div>
    </van-form>
    <van-calendar
      v-model="showCalendar"
      style="height: 60%"
      type="range"
      color="#548AF1"
      :min-date="minDate"
      @confirm="closeCalendar"
    />
  </div>
</template>

<script>
import { queryRepositoriesIsolationList, queryAllWareHoseList } from '@/api/allocation'
import Vue from 'vue'
import { Dialog, Toast } from "vant";
Vue.use(Toast)
export default {
  name: 'Searchform',
  props: {
    searchFlag: { type: Boolean, required: true },
    searchForm: { type: Object, required: true }
  },
  data() {
    return {
      minDate: new Date(2010, 0, 1),
      stateOptions: [
        {
          code: 0,
          name: '创建',
          show: true
        },
        {
          code: 1,
          name: '生效',
          show: true
        },
        {
          code: 2,
          name: '完成',
          show: true
        }
      ],
      searchParams: {
        name: '',
        productCode: '',
        barCode: '',
        stockLocationName: '',
        stockLocationNum: ''
      },
      dateRange: '',
      showCalendar: false,
      warehouseOptions: []
    }
  },
  watch: {
    searchForm: {
      handler(newVal, oldVal) {
        if (newVal && JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.searchParams = { ...this.searchParams, ...newVal }
          const { planStartTime, planEndTime } = newVal
          if (planStartTime || planEndTime) {
            this.dateRange = planStartTime + '--' + planEndTime
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getAllHouse()
  },
  mounted() {
    this.getAllWarehouse()
  },
  methods: {
    // 获取所有的仓库列表
    async getAllWarehouse () {
      const result = await queryAllWareHoseList()
      const { code, data = {}, message } = result.data || {}
      if (+code === 200) {
        const { records = [] } = data
        this.warehouseOptions = records
      } else {
        Toast(message)
      }
    },
    // 获取状态枚举
    // getOperattionOrderFilterStateList() {
    //   getOperattionOrderFilterStateList().then((res) => {
    //     const { code, data, message } = res.data;
    //     if (code === "200") {
    //       this.stateOptions = data || [];
    //     }
    //   });
    // },
    // 弹出时间选择器
    showTimePicker() {
      this.showCalendar = true
    },
    // 选择日历
    closeCalendar(val) {
      console.log(val)
      const [start, end] = val
      // this.searchParams.startTime = window.time
      //   .handleTime(start)
      //   .substring(0, 10);
      const type = '组件'
      this.searchParams.planStartTime = this.formatDate(start, type)
      this.searchParams.planEndTime = this.formatDate(end, type)
      // this.searchParams.endTime = window.time.handleTime(end).substring(0, 10);
      this.dateRange =
        this.searchParams.planStartTime + '--' + this.searchParams.planEndTime
      this.showCalendar = false
    },
    formatDate(val, type) {
      // 区分两种，(1)new Date(val)不兼容ios系统(ios不支持横-形式)
      // (2) new Date(val.replace(/-/g, '/'))为了兼容ios系统（但vant组件不支持）
      var date
      if (type == '组件') {
        date = new Date(val)
        const Y = date.getFullYear()
        const M = date.getMonth() + 1
        const D = date.getDate()
        const H = date.getHours()
        const Min = date.getMinutes()
        const S = date.getSeconds()
        return (
          Y +
          '-' +
          this.handleTime(M) +
          '-' +
          this.handleTime(D) 
          // ' ' +
          // this.handleTime(H) +
          // ':' +
          // this.handleTime(Min) +
          // ':' +
          // this.handleTime(S)
        )
      } else {
        date = new Date(val.replace(/-/g, '/'))
        const M = date.getMonth() + 1
        const D = date.getDate()
        const H = date.getHours()
        const Min = date.getMinutes()
        return (
          this.handleTime(M) +
          '-' +
          this.handleTime(D) +
          ' ' +
          this.handleTime(H) +
          ':' +
          this.handleTime(Min)
        )
      }
    },
    // 时间补零处理
    handleTime(time = 0) {
      return time * 1 < 10 ? '0' + time : time
    },
    // 搜索框确认
    onSubmit() {
      console.log(this.searchParams)
      this.$emit('confirm', this.searchParams)
      // this.searchParams = {
      //   value1: '',
      //   value2: '',
      //   value3: '',
      //   value4: ''
      // }
      // this.dateRange = ''
    },
    // 查询清空重置
    cancel() {
      this.searchParams = {}
      this.dateRange = ''
      this.$emit('cancel', this.searchParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.searchInfo {
  position: absolute;
  top: calc(46px + 4px);
  z-index: 33;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

  .vantForm {
    // padding: 0 15px;
    font-size: 13px;

    ::v-deep .van-field {
      line-height: 14px;
    }
    ::v-deep .van-field__label{
      color: #333333;
    }

    ::v-deep .van-button--primary {
      background: #007cff;
      border: 1px solid #007cff;
    }

    ::v-deep .van-field__control {
      text-align: right;
    }

    ::v-deep .van-button--block {
      height: 30px;
      font-size: 13px;
    }

    .btnOk {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      height: 30px;

      ::v-deep .van-button--round {
        width: 118px;
        border-radius: 4px;
      }

      ::v-deep .van-button--default {
        margin-right: 10px;
        border-color: #C9C9C9;
      }
    }

    .selTest {
      display: flex;
      justify-content: space-between;
      height: 36px;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;

      label {
        display: inline-block;
        width: 150px;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        color: #323232;
      }

      .labelLeft {
        text-align: left;
        padding-left: 16px;
      }

      .el-input {
        flex: 1 0 auto;
        width: 0;
      }

      ::v-deep .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: none;
        border-bottom: 1px solid #f6f6f6;
        text-align: right;
      }

      ::v-deep .el-input__inner::placeholder {
        text-align: right;
      }

      ::v-deep .el-select .el-input__inner {
        text-align: right;
      }

      ::v-deep .el-select__input {
        text-align: right;
      }
    }
  }
}

// .main {
//   flex: 1;
::v-deep .van-calendar__day--start {
  background-color: #439cf9;
}

::v-deep .van-calendar__day--end {
  background-color: #439cf9;
}

::v-deep .van-button--danger {
  background-color: #439cf9;
  border-color: #439cf9;
}

// }
</style>
